<template>
    <div>
      <JL-Navigation :title="'优惠券'"/>
      <ul class="tabs">
        <li class="tabs_text">
          <span :class="{'true':'tabs_text_xuan'}[getTabsSelected(2)]" @click="coupons(2)">未使用</span>
        </li>
        <li class="tabs_text">
          <span :class="{'true':'tabs_text_xuan'}[getTabsSelected(3)]" @click="coupons(3)">已使用</span>
        </li>
        <li class="tabs_text">
          <span :class="{'true':'tabs_text_xuan'}[getTabsSelected(4)]" @click="coupons(4)">已过期</span>
        </li>
      </ul>

      <!--<div class="tabs_underline_bgc">-->
        <!--<div class="tabs_underline"></div>-->
      <!--</div>-->
      <div class="content pb15" v-infinite-scroll="loadMore"
           :infinite-scroll-disabled="loading"
           :infinite-scroll-distance="10">
        <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="50">
        <div v-for="(item,index) in couponsDetail" :key="index">
          <div class="content_img">
            <!--<img src="@/assets/imgs/quan20.png">-->
            {{item.QMZ}}
          </div>
          <span class="content_name">{{item.QZMC}}</span>
          <span class="content_text">{{item.JSRQ}}过期</span>
          <hr class="line">
        </div>
        </mt-loadmore>
        <!--<div class="content_img">-->
          <!--<img src="@/assets/imgs/quan50.png">-->
        <!--</div>-->
        <!--<span class="content_name">优惠券</span>-->
        <!--<span class="content_text">2020-01-17过期</span>-->
        <!--<hr class="line">-->
        <!--<div class="content_img">-->
          <!--<img src="@/assets/imgs/quan100.png">-->
        <!--</div>-->
        <!--<span class="content_name">优惠券</span>-->
        <!--<span class="content_text">2020-01-17过期</span>-->
      </div>
    </div>
</template>

<script>
    export default {
        name: "CouponsPage",
      data(){
        return {
          couponsDetail: [],
          chose:2,
          loading: false,
          page_num: 1,
          isEnd: false,
        };
      },
      mounted() {
        this.page_num = 1;
        this.queryMemberCouponsDetail();
      },
      methods:{
        loadMore() {
          if (this.isEnd) return
          this.loading = true
          this.page_num++
          this.queryMemberCouponsDetail()
        },
        coupons(item){
          this.page_num = 1;
          this.chose = item;
          this.couponsDetail = [];
          this.$inbound.invoke({
            interfaceId:'app.member.queryMemberCouponsDetail',
            data:{QZT:item,page_num:this.page_num}})
            .then(msg =>{
              $Util.hideloading()

              this.isEnd = false;
              let list = msg['couponsDetail'] || [];
              if ($Util.isNull(list)) this.isEnd = true;
              Array.prototype.push.apply(this.couponsDetail, list);
              this.loading = false;
              this.$forceUpdate()
              this.loadMore();
            })
            .catch(e =>{
              this.loading = false;
              $Util.hideloading()
              $Util.toast({
                message: e.MESSAGE,
                position: 'middle'
              })
            })
        },
        queryMemberCouponsDetail(){
          this.$inbound.invoke({
            interfaceId:'app.member.queryMemberCouponsDetail',
            data:{QZT:this.chose,page_num:this.page_num}})
            .then(msg =>{
              $Util.hideloading()

              this.isEnd = false;
              let list = msg['couponsDetail'] || [];
              if ($Util.isNull(list)) this.isEnd = true;
              Array.prototype.push.apply(this.couponsDetail, list);
              this.loading = false;
              this.$forceUpdate()
            })
            .catch(e =>{
              this.loading = false;
              $Util.hideloading()
              $Util.toast({
                message: e.MESSAGE,
                position: 'middle'
              })
            })
        },
        loadTop() {
          this.page_num = 1
          $Util.loading();
          this.$inbound.invoke({
            interfaceId:'app.member.queryMemberCouponsDetail',
            data:{page_num: this.page_num,QZT:this.chose}})
            .then(msg =>{
              $Util.hideloading()
              let list = msg['couponsDetail'] || [];
              if ($Util.isNull(list)) this.isEnd = true;
              this.couponsDetail = {...{}, ...list};
              this.loading = false;
              this.$refs.loadmore.onTopLoaded();
              this.$forceUpdate()

            })
            .catch(e =>{
              this.loading = false
              $Util.hideloading()
              $Util.toast({
                message: e.MESSAGE,
                position: 'middle'
              })
            })
        },
        getTabsSelected(item){
          if(item == this.chose){
            return true
          }else {
            return false
          }
        }
      }
    }
</script>

<style scoped>
  .tabs{
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 59px;
  }

  .tabs_text{
    float: left;
    width: 33.333333%;
    font-family:'pingfang regular';
    font-size: 15px;color: #333;
  }

  .tabs_text_xuan{
    font-family:'pingfang bold' !important;
    font-size: 15px !important;
    color: #6996FF !important;
  }

  .tabs_underline{
    width: 22px;
    height: 3px;
    border-radius:5px;
    background-color: #6996FF;
    margin-left: calc(33.333333%);
    margin-top: 2px;
  }

  .tabs_underline_bgc{
    float: left;
    width: 33.333333%;
    text-align: center;
  }

  .content{
    float: left;
    width: calc(100% - 30px);
    box-shadow: 0px 0px 6px #ccc;
    margin:15px 0 0 15px;
    border-radius:5px
  }
  .content_img{
    float: left;
    margin: 15px 0 0 15px;
  }
  .content_name{
    float: left;
    width: calc(100% - 145px);
    font-family:'pingfang medium';
    font-size: 13px;
    color: #333;
    margin: 15px 0 0 15px;
  }
  .content_text{
    float: left;
    font-family:'pingfang regular';
    font-size: 12px;
    color: #999;
    margin: 5px 0 0 15px;
  }

  .line{
    float: left;
    width: 100%;
    border:1px solid #f5f5f5;
    margin-top: 10px;
  }
</style>
